<template>
	<view>
		<!-- 公共头部组件 -->
		<view class="headerOverall" :class="{'header-scrolled': scrollTop > 10 }">
		
			<view class="head-con">
				<image class="back-img" v-if="typeVal==1" @click="backFun()" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/fanhui.png" mode=""></image>
				<view class="head-text">{{textTit}}</view>
			</view>
		</view>
		<view style="height: 120rpx;"> </view>
	</view>
</template>

<script>
	export default {
		props:{
			typeVal: { 
				type: Number,
				default: 1
			},
			textTit:{
				type: String,
				default: ""
			},
			scrollTop: {
			   type: Number,
			   default: 0
			},
			backType: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
		    backFun() {
				console.log(this.backType)
				if (this.backType == 0) {
					this.jump('','back')
				} else {
					this.jump('/pages/index/index', 1)
				}
			},
		},
	}
</script>

<style lang="scss">
	.headerOverall{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		// border: 1rpx solid red;
		padding-top: var(--status-bar-height);
		background-color: transparent;
		transition: background-color 0.3s ease;
		z-index: 999;
	}
	.header-scrolled {
		// linear-gradient(135deg, #D1FEF1 0%, #F7F5E3)
	  background: linear-gradient(135deg, #D1FEF1 0%, #F7F5E3) !important;
	  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}
	.head-con{
		width: 100%;
		position: relative;
		.back-img{
			width: 45rpx;
			height: 45rpx;
			position: absolute;
			left: 40rpx;
			top: 62rpx;
			transform: translate(-50%,0);
		}
	}
	
	//标题
	.head-text {
		width: 100%;
		padding: 60rpx 0rpx 20rpx;
		color: #393C42;
		font-size: 32rpx;
		font-weight: bold; 
		padding-bottom: 20rpx;
		// border: 1rpx solid red;
		text-align: center;
	}
</style>
